﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">

    </style>
   <script src="../../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    
</head>
<body>
    <form>
        <div>
            <input type="text"/>
            <input type="file" />
            <input type="password" />
        </div>
        <div>
            <input type="radio" name="radio"/>radio
            <input type="radio" name="radio"/>radio
            <input type="radio" name="radio"/>radio
        </div>
        <div>
            <input type="checkbox" name="checkbox" />checkbox
            <input type="checkbox" name="checkbox" />checkbox
            <input type="checkbox" name="checkbox" />checkbox
        </div>
        <div>
            <select>
                <option value="1" selected="selected">option1</option>
                <option value="2">option2</option>
                <option value="3">option3</option>
            </select>
        </div>
        <div>
            <textarea></textarea>
        </div>
        <div>
            <img src="image/bomb.png" />
            <img src="image/boss.png" />
            <img src="image/enemy.png" />
            <img src="image/enemy2.png" />
            <input type="image" src="image/enemy2.png" />
        </div>
        <button>button</button>
        <input type="button" value="button" />
        <input type="reset" value="reset" />
    </form>
    <div id="box" style="width: 100px;height: 100px;border: 1px solid red;"></div>
    <div id="box" style="width: 100px;height: 100px;border: 1px solid red;"></div>
    
    <form>
 
		  <label>Name:</label>
		  <input name="name" />
		  <fieldset>
			    <label>Newsletter:</label>
			 
			    <input name="newsletter" />
			    <input name="newsletter" />
		  </fieldset>
	</form>
    <script type="text/javascript">
        //dom 准备就绪
        $(function () {
            //选择器结果集的长度（个数）
            $('input').length;
            $('input').size();
            //选择所有 input, textarea, select 和 button 元素.
            $(':input');

            //select 选择器
            $('select option[selected=selected]');
            //状态 :disabled, :endabled, :selected, :checked :focus
            //焦点
            //$(':input:first').focus();
            console.log($(':focus'));
            //每个id值在一个文件中只能使用一次。如果多个元素分配了相同的ID，
            //将只匹配该ID选择集合的第一个DOM元素。但这种行为不应该发生;有超过一
            // 个元素的文件使用相同的ID是无效的。
            $('#box').css('border','10px solid black');
            
            // 改变 label 下一个元素  input 的 样式      必须是相邻元素
            $('label+input').css('color','blue').val('aaaaa');

            // 改变 label 后面的所有元素  input 的 样式      必须是兄弟元素（父亲相同）；
//          $('label~input').css('color','blue').val('aaaaa');
        })
    </script>
</body>
</html>
